<!-- 
  Vue的插件
    概念：用来增强 Vue 的基础功能的。

    作用：
      1. 提供有一些全局组件的，比如组件库
      2. 提供有全局的指令、全局的过滤器、全局的混入(mixin)
      3. 给Vue.prototype上挂载属性与方法

  使用插件
    在 new Vue() 之前，通过 Vue.use(plugin) 使用插件

    Vue.use(plugin) 运行的内部逻辑如下：
      1. 判断 plugin 是函数的化，直接执行该函数，且将 Vue 作为参数传递给该函数
      2. 判断 plugin 是个对象的化，会寻找该对象中的 install 函数，调用该函数，且将 Vue 作为参数传递给该 install 函数。

  开发插件
    插件有两种表现形式
      1. 对象
        {
          install() {}
        }
      2. 函数
        function(Vue) {}

 -->
<template>
  <div>
    <button @click="isHide = !isHide">Toggle</button>
    <h1 v-hide="isHide">App - {{ msg | up }}</h1>

    <hr />
    <button @click="$message">点我</button>

    <hr />
    <button @click="fn1">点我，调用一下接口</button>

    <Hello></Hello>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
      isHide: false,
    };
  },
  methods: {
    fn1() {
      this.$http.get("/books").then((response) => {
        console.log("then", response);
        console.log(response.data);
      });
    },
  },
};
</script>
